<template>
  <view class="main">
    <view class="top-block">
      <view class="top-block-title">
        <view class="title-txt">让供求更简单</view>
      </view>
      <view class="top-block-box dispaly-just-between">
        <view class="top-block-item one">
          <view class="block-con">
            <view class="item-title">找社群</view>
            <view class="item-number dispaly-center">
              <view>{{ topData.homeNum1 || 0 }}万</view>
              <van-icon name="back-top" />
            </view>
            <view class="item-title1">行业社群</view>
          </view>
        </view>
        <view class="top-block-item two">
          <view class="block-con">
            <view class="item-title">找人脉</view>
            <view class="item-number dispaly-center">
              <view>{{ topData.homeNum2 || 0 }}万</view>
              <van-icon name="back-top" />
            </view>
            <view class="item-title1">人脉</view>
          </view>
        </view>
        <view class="top-block-item three">
          <view class="block-con">
            <view class="item-title">招商机</view>
            <view class="item-number dispaly-center">
              <view>{{ topData.homeNum3 || 0 }}万</view>
              <van-icon name="back-top" />
            </view>
            <view class="item-title1">线索商机</view>
          </view>
        </view>
      </view>
    </view>
    <view class="search">
      <van-search v-model="seacherKey" @click="$goUrl(`/pages/index/pages/search?type=0`)" background="transparent"
        placeholder="搜索" shape="round" />
    </view>
    <view class="like-box">
      <view class="title-box dispaly-just-between">
        <view class="title-block dispaly-center">
          <view class="title-line"></view>
          <view class="title-text">猜你喜欢</view>
        </view>
        <view class="reload" @click="getLikeListData(0)">
          <image src="/static/icon/reload.svg" mode="widthFix" />
        </view>
      </view>
      <view class="like-con" v-if="likeList.length">
        <!-- scroll-x="true" -->
        <scroll-view class="nav-bar" scroll-x="true" scroll-left="120">
          <!-- nav-bar-wrap -->
          <!-- :style="likeList.length > 4 ? barWar : ac" -->
          <!-- style="display: flex; flex-wrap: wrap" -->
          <view class="" :style="likeList.length > 3 ? barWar : ac">
            <view class="like-con-item" v-for="(item, index) in likeList" :key="index"
              @click="$goUrl(`/pages/index/pages/groupDetail?id=${item.id}`)">
              <view class="like-cover">
                <image :src="item.icon" mode="aspectFill" />
              </view>
              <view class="like-name over-1">{{ item.name }}</view>
              <view class="number-box dispaly-just-between">
                <view class="number">群人数{{ item.memberNum }}</view>
                <image src="/static/icon/wex.svg" mode="widthFix" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-else>
        <LoadMore status="noMore" />
      </view>
    </view>
    <view class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.url" mode="aspectFill" />
        </van-swipe-item>
      </van-swipe>
    </view>
    <view class="comment-box">
      <view class="title-block dispaly-center">
        <view class="title-line"></view>
        <view class="title-text">热门置顶</view>
      </view>
      <view style="margin-top: 20rpx">
        <CommentCard :wStar="false" @reload="reload" v-for="(item, index) in hotDataList" :key="index"
          :showShare="false" :item="item" :isHot="true" :current="''" />
        <LoadMore :status="status" />
      </view>
    </view>
  </view>

  <view class="carete-circle" @click="$goUrl(`/pages/index/pages/createCicle`)" v-if="topData.shortcutButton == 1">
    <!-- <view class="circle-w dispaly-align-center">
      <view class="circle-n dispaly-align-center">
        <view>
          <view class="circle-text">圈子</view>
          <view class="circle-text">创建</view>
        </view>
      </view>
    </view> -->
  </view>

  <!-- 猜你喜欢弹窗 -->
  <van-popup v-model:show="showLikePopShow" round>
    <view class="pop-main">
      <view class="title-img dispaly-align-center">
        <image src="/static/icon/like.svg" mode="aspectFill" />
      </view>
      <view class="close" @click="showLikePopShow = !showLikePopShow">
        <image src="/static/icon/close-circle.svg" mode="" />
      </view>
      <view class="title-tip dispaly-align-center">选择你感兴趣的圈子获得更多商机</view>
      <view class="circle-box">
        <view class="circle-item dispaly-col-center" v-for="(item, index) in likeListDatas.slice(0, 6)" :key="index"
          @click="clickCircle(item, index)">
          <view class="cover">
            <image :src="item.icon" mode="aspectFill" />
            <view class="select dispaly-align-center" v-if="current == index">
              <van-icon name="success" color="#fff" />
            </view>
          </view>
          <view class="like-name">{{ item.name }}</view>
        </view>
      </view>
      <view class="dispaly-align-center next" @click="down">下一步</view>
    </view>
  </van-popup>


</template>

<script setup>

import { reactive, ref } from "vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
  onHide,
} from "@dcloudio/uni-app";
import CommentCard from "@/components/commentCard/commentCard.vue";
import { getLikeList, proxy, hotTop, banner } from "@/api/apiList";
const down = () => {
  showLikePopShow.value = false;
  uni.navigateTo({
    url: `/pages/index/pages/groupDetail?id=${likeList.value[current.value].id
      }`,
  });
};

const ac = ref({
  display: "flex",
  "align-items": "center",
});

const barWar = ref({
  display: "flex",
  "flex-flow": "column wrap",
  "max-height": "750rpx",
});

// 搜索
const seacherKey = ref("");
// 猜你喜欢弹窗
const showLikePopShow = ref(false);

// 选择喜欢圈子
const current = ref(0);
const clickCircle = (item, index) => {
  current.value = index;
};

onShow(async () => {
  query.pageNum = 1;
  // showLikePopShow
  if (uni.getStorageSync("userInfo")) {
    if (
      uni.getStorageSync("userInfo").circleIds?.length > 0 ||
      uni.getStorageSync("userInfo").circleIds != null
    ) {
      showLikePopShow.value = false;
    } else {
      showLikePopFun();
    }
  }
  await init();
});

const init = async () => {
  await getTopData();
  await getLikeListData(0);
  await getLikeListData(1);
  hotDataList.value = [];
  await hotTopData();
  await getBanner();
};

onHide((e) => {
  showLikePopShow.value = false;
});

// 控制猜你喜欢弹窗
const showLikePopFun = () => {
  // if (uni.getStorageSync('isRemod')) {
  // showLikePopShow.value = true
  // }

  const lastShowTime = uni.getStorageSync("lastPopupTime");
  const now = new Date().getTime();
  // 如果lastShowTime存在且在24小时内，不弹出
  if (lastShowTime && now - lastShowTime < 24 * 60 * 60 * 1000) {
    return; // 不弹出弹窗
  }
  // 显示弹窗
  showLikePopShow.value = true;
  // 更新弹窗时间
  uni.setStorageSync("lastPopupTime", now);
};

// 猜你喜欢列表
const likeList = ref([]);
const likeListDatas = ref([]);
// 获取猜你喜欢列表
const getLikeListData = async (index) => {
  // uni.getStorageSync('userInfo').industryId
  const res = await getLikeList({
    id: uni.getStorageSync("userInfo").industryId,
    isPop: index,
  });
  if (res.code == 200) {
    if (index == 0) {
      likeList.value = res.data;
    } else {
      likeListDatas.value = res.data;
    }
  }
};

// 获取顶部数据
const topData = ref({});
const getTopData = async () => {
  const res = await proxy("homeNum1,homeNum2,homeNum3,shortcutButton");
  if (res.code == 200) {
    topData.value = res.data;
  }
};

const reload = () => {
  query.pageNum = 1;
  hotDataList.value = [];
  hotTopData();
};

// 热门置顶
const query = reactive({
  pageSize: 1000000,
  pageNum: 1,
  isHot: 2,
  isUserId: uni.getStorageSync("userInfo")?.data?.userId ? 1 : 0,
});
const hotDataList = ref([]);
const status = ref("noMore");
const hotTopData = async () => {
  const res = await hotTop(query);
  status.value = "loading";
  if (res.code == 200) {
    if (res.rows.length) {
      hotDataList.value = hotDataList.value.concat(res.rows);
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

// 轮播图
const bannerList = ref([]);
const getBanner = async () => {
  const res = await banner();
  if (res.code == 200) {
    bannerList.value = res.data;
  }
};

onReachBottom(() => {
  query.pageNum++;
  hotTopData();
});

onPullDownRefresh(() => {
  query.pageNum = 1;
  uni.showLoading({
    title: "加载中",
  });
  hotDataList.value = [];
  init();
  uni.hideLoading();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
:deep(.van-search__content--round) {
  background-color: #fff;
}

:deep(.van-search) {
  padding: 0;
}

.ac {
  display: flex;
  align-items: center;
}

.nav-bar-wrap {
  //  关键的样式
  display: flex;
  flex-flow: column wrap;
  max-height: 750rpx;
}

scroll-view {
  white-space: nowrap;
}

/* 去除滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.carete-circle {
  position: fixed;
  right: 20rpx;
  bottom: 122rpx;

  .circle-w {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    border: 4rpx solid #111111;
    border-radius: 50%;

    .circle-n {
      background-color: #0753fd;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50rpx;

      .circle-text {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}

.title-block {
  .title-line {
    width: 6rpx;
    height: 24rpx;
    border-radius: 20rpx;
    background: #0753fd;
    margin-right: 12rpx;
  }

  .title-text {
    font-family: PingFang SC Bold;
    font-size: 26rpx;
    font-weight: normal;
    color: #111111;
  }
}

.main {
  padding: 30rpx;

  .top-block {
    .top-block-title {
      border-radius: 16rpx 16rpx 0 0;
      background: linear-gradient(270deg, #07e4fd 0%, #0753fd 100%);
      padding: 12rpx 24rpx;

      .title-txt {
        font-family: DOUYINSANSBOLD;
        font-size: 32rpx;
        font-weight: normal;
        color: #ffffff;
      }
    }

    .top-block-box {
      border-radius: 0 0 16rpx 16rpx;
      background-color: #fff;
      padding: 24rpx;

      .top-block-item {
        width: 204rpx;
        height: 248rpx;
        background-size: cover;
        box-sizing: border-box;

        .block-con {
          margin-top: 42rpx;
          margin-left: 24rpx;

          .item-title {
            font-family: PingFang SC Regular;
            font-size: 28rpx;
            font-weight: normal;
            color: #ffffff;
          }

          .item-number {
            margin-top: 20rpx;
            margin-bottom: 10rpx;
            font-family: PingFang SC Bold;
            font-size: 30rpx;
            font-weight: normal;
            color: #ffffff;
          }

          .item-title1 {
            font-family: PingFang SC Regular;
            font-size: 20rpx;
            font-weight: normal;
            color: #ffffff;
          }
        }
      }

      .one {
        background: url("../../static/image/item-one.png") no-repeat;
      }

      .two {
        background: url("../../static/image/item-two.png") no-repeat;
      }

      .three {
        background: url("../../static/image/item-three.png") no-repeat;
      }
    }
  }

  .search {
    margin: 30rpx 0;
  }

  .like-box {
    .scroll-view_H {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }

    .reload {
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }

    .like-con {
      display: flex;
      flex-wrap: wrap;

      .like-con-item {
        width: calc(33.333% - 12rpx);
        margin: 15rpx 6rpx;

        .like-cover {
          image {
            width: 222rpx;
            height: 222rpx;
            border-radius: 16rpx;
          }
        }

        .like-name {
          font-family: PingFang SC Bold;
          font-size: 26rpx;
          font-weight: normal;
          color: #111111;
          margin: 24rpx 0 16rpx 0;
        }

        .number-box {
          .number {
            font-family: PingFang SC Bold;
            font-size: 22rpx;
            font-weight: normal;
            color: #777777;
          }

          image {
            width: 30rpx;
          }
        }
      }
    }
  }

  .banner {
    margin: 40rpx 0;

    image {
      width: 100%;
      height: 284rpx;
      border-radius: 20rpx;
    }
  }
}

.pop-main {
  background-color: #fff;
  width: 660rpx;
  height: 838rpx;
  box-sizing: border-box;
  padding: 50rpx 30rpx;
  position: relative;

  .title-img {
    image {
      width: 250rpx;
      height: 54rpx;
    }
  }

  .title-tip {
    font-family: PingFang SC Medium;
    font-size: 24rpx;
    font-weight: normal;
    color: #111111;
    margin: 22rpx 0 44rpx 0;
  }

  .circle-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .circle-item {
      width: 180rpx;
      height: 180rpx;
      margin: 40rpx 10rpx;

      .cover {
        position: relative;

        .select {
          width: 36rpx;
          height: 36rpx;
          background-color: #05bd08;
          border-radius: 50%;
          position: absolute;
          top: 5rpx;
          right: 5rpx;
        }

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .like-name {
        font-family: PingFang SC Bold;
        font-size: 24rpx;
        font-weight: normal;
        color: #111111;
        margin-top: 20rpx;
      }
    }
  }

  .next {
    font-family: PingFang SC Bold;
    font-size: 30rpx;
    font-weight: normal;
    color: #0753fd;
    margin-top: 50rpx;
    width: 660rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 50rpx;
  }
}

.close {
  position: absolute;
  right: 30rpx;
  top: 30rpx;

  image {
    width: 44rpx;
    height: 44rpx;
  }
}
</style>
